<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
</style>

<template>
    <div class="company">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加渠道信息</legend>
        </fieldset>

        <form class="layui-form " id="form">

            <div class="layui-form-item">
                <label class="layui-form-label">部门 </label>
                <div class="layui-input-block">
                    <select name="departid"  id="departid"  lay-filter="departid" lay-verify="required" class="layui-form-select">
                        <option value="">请选择部门</option>
                        <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">品牌</label>
                <div class="layui-input-block">
                    <input type="hidden" name="brand" :value="currBrand.name" autocomplete="off"  class="layui-input">
                    <select name="brandid" lay-filter="brandid" lay-verify="required" class="layui-form-select">
                        <option value="">请选择品牌</option>
                        <option v-for="(item, index) in brands" :key="item.guid" :value="item.guid">{{item.name}}</option>
                    </select>

                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">品种名称</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <select name="product"  id="product"  lay-filter="product" v-model="channel.product" lay-verify="required" class="layui-form-select">-->
<!--                        <option value="">请选择产品</option>-->
<!--                        <option v-for="(item, index) in productinfo" :key="item.guid" :value="item.guid">{{item.productname}}</option>-->
<!--                    </select>-->

<!--                </div>-->
<!--            </div>-->



<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">规格 </label>-->
<!--                <div class="layui-input-block">-->
<!--                    <select name="salesspecificationid"  id="salesspecificationid"  lay-filter="salesspecificationid" v-model="channel.salesspecificationid"  required  lay-verify="required"   class="layui-form-select">-->
<!--                        <option value="">请选择规格</option>-->
<!--                        <option v-for="(item, index) in salesspecification"  :proName="item.name" :proPage="item.description" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
<!--                    </select>-->

<!--                </div>-->
<!--            </div>-->

            <!--<div class="layui-form-item">
                <label class="layui-form-label">包装</label>
                <div class="layui-input-block">
                    <input type="text" name="packages" id="packages" :value="channel.packages"    placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>-->





            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>
            <div style="height:200px"></div>
        </form>
    </div>
</template>

<script>
    let qs = require('qs');
    export default {

        name: 'CustomerAdd',
        props: ['id'],

        data () {
            return {
                guid : this.id,
                adata: {},
                datacategory:{},
                typeEmnu:[],
                costincomeEmnu:[],
                channel:[],
                salesspecification:[],
                departments:[],
                productinfo:[],
                brands: [],
                currBrand: {}
            }
        },
        mounted() {
            let that = this;
            layui.use(['form'], function () {
                var form = layui.form,
                    layer = layui.layer;

                that.getDeparts();
                that.getBrands();
                //提交编辑过的数据
                form.on('submit(submit)', function (data) {
                    let loader = layer.load();
                    $.ajax({
                        url: '/sales/Channel!save.action',
                        data: data.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.result == "success") {
                                that.toast("添加成功");
                                $("#form")[0].reset();
                                $('#salesspecificationid').html("");
                                //that.$parent.switchPage('ChannelList');
                                //loader.c
                            } else if (res.result == "error") {
                                that.toast(res.msg);
                            } else{
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
                form.on('select(brandid)', function(data){
                    that.currBrand = that.brands.filter(item => {
                        return item.guid == data.value;
                    })[0];
                    console.log('currBrand:', that.currBrand)
                    form.render('select');//select是固定写法 不是选择器
                });
            });
        },
        updated: function () {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {
            back: function () {
                this.$parent.switchPage(this.$parent.refView);
            },
            getBrands: function() {
                this.$post('/sales/Brand!getList.action', qs.stringify({}))
                    .then(response => {
                        let data = response.data;
                        if (data.msg == 'scucess') {
                            this.brands = data.list;
                        } else {
                            this.toast('获取品牌数据失败！');
                        }
                    })
            },
            getDeparts: function() {
                this.$post('/sales/Department!listAll.action', qs.stringify({}))
                    .then(response => {
                        let data = response.data;
                        if (data.info != 'error') {
                            this.departments = data.info;
                        } else {
                            this.toast('获取部门数据失败！');
                        }
                    })
            }


        }
    }
</script>
